<template>
  <el-dropdown @command="handleCommand" trigger="click">
    <el-button size="small" type="primary" plain>
      操作
      <el-icon class="el-icon--right">
        <ArrowDown />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="action in actions"
          :key="action.command"
          :command="action.command"
          :disabled="action.disabled"
          :divided="action.divided"
        >
          <el-icon v-if="action.icon" class="dropdown-icon">
            <component :is="action.icon" />
          </el-icon>
          <span :class="action.type ? `text-${action.type}` : ''">
            {{ action.label }}
          </span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  actions: {
    type: Array,
    required: true,
    default: () => []
  },
  row: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['action'])

const handleCommand = (command) => {
  emit('action', { command, row: props.row })
}
</script>

<style scoped>
.dropdown-icon {
  margin-right: 6px;
}

.text-success {
  color: var(--el-color-success);
}

.text-warning {
  color: var(--el-color-warning);
}

.text-danger {
  color: var(--el-color-danger);
}

.text-info {
  color: var(--el-color-info);
}
</style>